<template>
	<view class="login-box">
			<view class="miaoshu">
					<view class="logo">
							<image class="logo-img" src="../../static/img/logo.png" mode=""></image>
					</view>
					<view class="title-box">
						<view class="title-1">欢迎来到服饰管理系统</view>
						<view class="title-2">登录账号</view>
					</view>
			</view>

		    <form>
					<input class="username" name="username" v-model="form.username" focus placeholder="账号" />
					<input class="userpwd" password v-model="form.password" placeholder="密码" />
					<view class="code-box">
						<input class="code" v-model="form.code" placeholder="验证码" />
						<image :src="codeImg" mode="" class="codeImg"></image>
					</view>
					
					<button type="default" class="submit" @click="loginFun">登录</button>
			</form>
	</view>
</template>

<script setup>
	import { showLoading, showMsg } from "../../utils/msg.js" 
	import {
	    onLoad,
		onShow,
		onPullDownRefresh
	  } from "@dcloudio/uni-app";
	
	import { ref } from "vue"
	import { login,getCaptchaImage } from "../../configure/api/login/index.js";
	import { useUserStore } from "../../store/index.js";

	const form = ref({
		username: '',
		password: '',
		code: ''
	})
	
	const userStore = useUserStore()
		
	const loginFun = () => {
		const { username,password,code } = form.value
		if(!username || !password){
			showMsg('账号密码不能为空!')
			return
		}
		showLoading()
		login({username,password,sessionId: sessionId.value,code }).then((res)=>{
			userStore.login(res)
		}).finally(()=>{
			uni.hideLoading();
		})
	}
	
	const codeImg = ref('')
	const sessionId = ref('')
	const getCaptchaImageFun = () => {
		getCaptchaImage({}).then((res)=>{
			codeImg.value = res.img
			sessionId.value = res.sessionId
		})
	}
	
	onPullDownRefresh (() => {
		
	})
	
	onLoad(()=>{
		
	})
	
	onShow(()=>{
		getCaptchaImageFun()
	})

</script>

<style lang="scss">
	.login-box{
		padding: 100rpx;
		
		.miaoshu{
			width: 100%;
			display: flex;
			margin-bottom: 150rpx;
			display: flex;
			
			.logo{
				margin-right: 26rpx;
			}
			
			
			.logo,.logo-img{
				width: 120rpx;
				height: 120rpx;
			}
			
			.logo-img{
				border-radius: 20rpx;
			}
			
			.title-box{
				.title-1{
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					font-weight: bold;
				}
				.title-2{
					font-size: 24rpx;
					color: #9f9f9f;
				}
			}
		}
		
		.username,.userpwd{
			font-size: 28rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid var(--borderColor);
		}
		
		.code-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid var(--borderColor);
			
			.code{
				
			}
			.codeImg{
				width: 180rpx;
				height: 60rpx;
			}
		}
		
		
		.submit{
			margin-top: 121rpx;
			background-color: var(--mainColor);
			width: 100%;
			color: #fff;
			// border-radius: 100rpx;
		}
		
		.go-register{
			font-size: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			
			.label{
				color: #616266;
			}
			
			.option{
				color: #409eff;
			}
		}
		
		.forgotPwd{
			margin-top: 20rpx;
			color: var(--mainColor);
		}
	}
</style>

